<!DOCTYPE html>
<html lang="ch">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS学习笔记</title>
</head>
<body>
    <h2>有用的字符</h2>

    <h3>把字符串当作对象</h3>

    <ul>
        <li>获取字符串长度</li>
        使用<code>length</code>属性
    

    <li>检索特定字符串字符</li>

    <li>在字符串中查找子字符串并提取
        <ul>
            <li>使用 <code>indexOf()</code>方法搜索字符串</li>
            <li>使用<code>slice()</code>方法提取字符</li>
        </ul>
    </li>


    <li>转换大小写</li>
        <ul>
            <li>方法<code>toLowerCase()</code>将所有字符串分别转换为小写</li>
            <li>方法<code>toUpperCase()</code>将所有字符串分别转换为大写</li>
        </ul>
    <li>替换字符串的某部分</li>
        <ul>
            <li>使用<code>replace()</code>方法将字符串中的一个子字符串替换为另一个子字符串。</li>
        </ul>

    </ul>
    

    <h2>数组 </h2>
    <ul>
        <li>创建数组</li>
        <li>访问和修改数组元素</li>
        <li>获取数组长度</li>
        可以通过使用 length 属性获取数组的长度
    </ul>

    <h3>一些有用的数组方法</h3>
    <h4>字符串和数组之间的转换</h4>
    <ul>
        <li> <code>split()</code> 方法。 在其最简单的形式中，这需要一个参数，您要将字符串分隔的字符，并返回分隔符之间的子串，作为数组中的项。</li>
        <li>也可以使用 <code>join()</code> 方法进行相反的操作。</li>
        <li>将数组转换为字符串的另一种方法是使用 <code>toString() </code>方法。 toString() 可以比 join() 更简单，因为它不需要一个参数，但更有限制。 使用 join() 可以指定不同的分隔符。</li>
    </ul>

    <h4>添加和删除数组项</h4>
    <ul>
        <li>使用<code>push() </code> 方法在数组末尾添加一个项目</li>
        <li>使用<code>pop() </code> 方法在数组末尾删除一个项目</li>
        <li><code>unshift() </code> 和 <code>shift() </code> 分别作用于数组的开始，而不是结尾。</li>
    </ul>

    <h2>事件介绍</h2>
    
    <pre>
        const btn = document.querySelector('button');

        function bgChange() {
        const rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
        document.body.style.backgroundColor = rndCol;
        }

        btn.onclick = bgChange;
    </pre>
    <ul>
        <li><code>btn.onfocus及btn.onblur</code> — 颜色将于按钮被置于焦点或解除焦点时改变（尝试使用Tab移动至按钮上，然后再移开）。这些通常用于显示有关如何在置于焦点时填写表单字段的信息，或者如果表单字段刚刚填入不正确的值，则显示错误消息。</li>
        <li><code>btn.ondblclick</code> — 颜色将仅于按钮被双击时改变。</li>
        <li><code>window.onkeypress, window.onkeydown, window.onkeyup</code> — 当按钮被按下时颜色会发生改变. keypress 指的是通俗意义上的按下按钮 (按下并松开), 而 keydown 和 keyup 指的是按键动作的一部分,分别指按下和松开. 注意如果你将事件处理器添加到按钮本身，它将不会工作 — 我们只能将它添加到代表整个浏览器窗口的 window对象中。</li>
        <li><code>btn.onmouseover 和 btn.onmouseout</code> — 颜色将会在鼠标移入按钮上方时发生改变, 或者当它从按钮移出时.</li>
    </ul>

    <h3><code>addEventListener() 和removeEventListener()</code></h3>
    <pre>
        const btn = document.querySelector('button');

        function bgChange() {
        const rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
        document.body.style.backgroundColor = rndCol;
        }

        btn.addEventListener('click', bgChange);
    </pre>

    <h3>创建对象</h3>
    <pre>
        const myDiv = document.createElement('div');
        document.body.appendChild(myDiv);
    </pre>

    <h2>JavaScript 对象基础</h2>
    <h3>对象基础</h3>
    


</body>
</html>